<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>书城首页</title>
    <link type="text/css" rel="stylesheet" href="/static/css/style.css">
    <script type="text/javascript" src="/static/script/jquery-3.7.1.js"></script>

    <script>
        $(function () {
            //给添加购物车的按钮绑定单击事件
            $(".addBook2Cart").click(function () {
                //获取要添加的图书的id
                var bookId = $(this).attr("id");
                //设置请求的url
                var url = "/addBook2Cart"
                //设置请求参数
                var param = {"bookId": bookId}
                //发送Ajax请求
                $.post(url, param, function (res) {
                    if (res == "请先登录！") {
                        location = "/pages/user/login.html"
                    } else {
                        //将响应信息设置到span中
                        $("#bookMsg").text(res)
                    }
                });
            });
        });
    </script>
</head>
<body>

<div id="header">
    <img class="logo_img" alt="" src="/static/img/logo.gif">
    <span class="wel_word">网上书城</span>
    {{if .IsLogin}}
    <div>
        <span>欢迎<span class="um_span">{{.Username}}</span>光临尚硅谷书城</span>
        <a href="/getCartInfo">购物车</a>
        <a href="/getMyOrder">我的订单</a>
        <a href="/logout">注销</a>&nbsp;&nbsp;
        <a href="/main">返回</a>
    </div>
    {{else}}
    <div>
        <a href="pages/user/login.html">登录</a> |
        <a href="pages/user/regist.html">注册</a> &nbsp;&nbsp;
        <a href="/pages/manager/manager.html">后台管理</a>
    </div>
    {{end}}
</div>

<div id="main">
    <div id="book">
        <div class="book_cond">
            <form action="/getPageBooksByPrice" method="POST">
                价格：<input type="text" name="min"> 元 -
                <input type="text" name="max"> 元
                <button>查询</button>
            </form>
        </div>
        <div style="text-align: center">
            <!-- <span>您的购物车中有3件商品</span> -->
            <div>
                <span style="color: red" id="bookMsg"></span></span>
            </div>
        </div>

        {{range .Books}}
        <div class="b_list">
            <div class="img_div">
                <img class="book_img" alt="" src="{{.ImgPath}}"/>
            </div>
            <div class="book_info">
                <div class="book_name">
                    <span class="sp1">书名:</span>
                    <span class="sp2">{{.Title}}</span>
                </div>
                <div class="book_author">
                    <span class="sp1">作者:</span>
                    <span class="sp2">{{.Author}}</span>
                </div>
                <div class="book_price">
                    <span class="sp1">价格:</span>
                    <span class="sp2">￥{{.Price}}</span>
                </div>
                <div class="book_sales">
                    <span class="sp1">销量:</span>
                    <span class="sp2">{{.Sales}}</span>
                </div>
                <div class="book_amount">
                    <span class="sp1">库存:</span>
                    <span class="sp2">{{.Stock}}</span>
                </div>
                <div class="book_add">
                    {{if .Stock}}
                    <button id="{{.ID}}" class="addBook2Cart">加入购物车</button>
                    <!-- <input type="hidden" value="{{.ID}}"/> -->
                    {{else}}
                    <span style="color:red">小二拼命补货中...</span>
                    {{end}}
                </div>
            </div>
        </div>
        {{end}}

    </div>

    <div id="page_nav">
        {{if .IsHasPrev}}
        <a href="/getPageBooksByPrice?min={{.MinPrice}}&max={{.MaxPrice}}">首页</a>
        <a href="/getPageBooksByPrice?pageNo={{.GetPrevPageNo}}&min={{.MinPrice}}&max={{.MaxPrice}}">上一页</a>
        {{end}}
        当前是第{{.PageNo}}页，共{{.TotalPageNo}}页，共{{.TotalRecord}}条记录
        {{if .IsHasNext}}
        <a href="/getPageBooksByPrice?pageNo={{.GetNextPageNo}}&min={{.MinPrice}}&max={{.MaxPrice}}">下一页</a>
        <a href="/getPageBooksByPrice?pageNo={{.TotalPageNo}}&min={{.MinPrice}}&max={{.MaxPrice}}">末页</a>
        {{end}}
        到第<input value="{{.PageNo}}" name="pn" id="pn_input"/>页
        <input type="button" value="确定" id="sub">
        <script>
            //给确定按钮绑定单击事件
            $("#sub").click(function () {
                //获取输入的页码
                var pageNo = $("#pn_input").val();
                location = "/getPageBooksByPrice?pageNo=" + pageNo + "&min={{.MinPrice}}&max={{.MaxPrice}}"
            });
        </script>
    </div>

</div>

<div id="bottom">
		<span>
			尚硅谷书城.Copyright &copy;2015
		</span>
</div>
</body>
</html>